<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 不支持的浏览器将会显示`汉字（han zi）` -->
    <ruby>
        汉<rt>han</rt>
        字<rt>zi</rt>
    </ruby>
    <ruby>
        汉<rp>(</rp><rt>han</rt><rp>)</rp>
        字<rp>(</rp><rt>zi</rt><rp>)</rp>
    </ruby>
    <ruby>
        <rb>汉</rb>字
        <rp>(</rp><rt>han</rt>zi<rp>)</rp>
    </ruby>
    <ruby>
        明日<rp>(</rp><rt>ming ri</rt><rp>)</rp>
    </ruby>
    <ruby>
        <rb>旧</rb>
        <rb>金</rb>
        <rb>山</rb>
        <rt>jiù</rt>
        <rt>jīn</rt>
        <rt>shān</rt>
        <rtc>San Francisco</rtc>
    </ruby>
</body>
</html>